<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, viewport-fit=cover, minimal-ui" />
		<title>爱心碰撞</title>
		<style>
			html,
			body {
				margin: 0 0;
				padding: 0 0;
			}
			.container {
				width: 100%;
				height: 100vh;
				overflow: hidden;
				background: url('https://bpic.51yuansu.com/backgd/cover/00/24/73/5ba5a8d652276.jpg?x-oss-process=image/resize,w_780/sharpen,100');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.container .love {
				width: 50px;
				height: 50px;
				background: tomato;
				position: absolute;
				border-radius: 5px;
				filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.3));
				animation-duration: 1.2s;
				animation-timing-function: ease-out;
				animation-iteration-count: infinite;
			}
			.container .love::before {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 50%;
				background: tomato;
				border-radius: 50%;
			}
			.container .love::after {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				top: -50%;
				left: 0;
				background: tomato;
				border-radius: 50%;
			}
			.container .love.left {
				bottom: 12%;
				left: 20%;
				transform: translate(-50%, 0) rotate3d(0, 0, 1, -45deg);
				animation-name: leftToRight;
			}
			.container .love.right {
				bottom: 12%;
				right: 20%;
				transform: translate(50%, 0) rotate3d(0, 0, 1, -45deg);
				animation-name: rightToLeft;
			}
			
			@keyframes leftToRight {
				0% {
					width: 20px;
					height: 20px;
					bottom: 12%;
					left: 20%;
					opacity: 0;
				}
				30% {
					opacity: 1;
				}
				60% {
					width: 50px;
					height: 50px;
					bottom: 60%;
					left: 50%;
					opacity: 1;
				}
				100% {
					width: 100px;
					height: 100px;
					bottom: 60%;
					left: 50%;
					opacity: 0;
				}
			}
			@keyframes rightToLeft {
				0% {
					width: 20px;
					height: 20px;
					bottom: 12%;
					right: 20%;
					opacity: 0;
				}
				30% {
					opacity: 1;
				}
				60% {
					width: 50px;
					height: 50px;
					bottom: 60%;
					right: 50%;
					opacity: 1;
				}
				100% {
					width: 100px;
					height: 100px;
					bottom: 60%;
					right: 50%;
					opacity: 0;
				}
			}
		</style>
	</head>
	
	<body>
		<div class="container">
			<div class="love left"></div>
			<div class="love right"></div>
		</div>
		
		
		<script>
			let leftDom = document.querySelector('.love.left')
			let rightDom = document.querySelector('.love.right')
			
			let ob = new IntersectionObserver(function(entries) {
				let entry = entries[0]
				console.log(entry)
			}, {
				root: leftDom,
				threshold: 0.5
			})
			
			ob.observe(rightDom)
		</script>
	</body>
</html>